<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>TWS Javascript Framework - Forms</title>
  <meta name="description" content="TWS Javascript Framework">
  <meta name="author" content="Lee Assam">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/jquery-ui-1.8.15.custom.css">
  <link rel="stylesheet" href="css/jquery.cluetip.css">
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

  <div id="container">
    <header>
    <?php include "includes/header.php"?>
    </header>

    <div id="main" role="main">

    <div id="breadcrumbs">
      <a href="index.php">Home</a><span>Forms</span>
    </div>

           <h1>Forms</h1>

            <div>
              <h2>Important links</h2>
              <p>The tws form plugin uses two main plugins. The jQuery Form Validation Plugin and the jQuery Form Plugin.</p>
              <ul>
                <li><a href="http://docs.jquery.com/Plugins/Validation">jQuery Form Validation Plugin</a></li>
                <li><a href="http://jquery.malsup.com/form/">jQuery Form Plugin</a></li>
              </ul>
            </div>

            <div id="forms" >

              <h2>Inline Form</h2>

              <form id="inlineForm" action="" method="post" class="inlineForm">
                <div class="formErrors" id="inlineFormErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul></ul>
                </div>

                <div class="row">
                  <label for="firstName"><span class="requiredLabel">*</span>First name
                    <input type="text" id="firstName" name="firstName" value=""/>
                  </label>
                  <label for="lastName"><span class="requiredLabel">*</span>Last name
                    <input type="text" id="lastName" name="lastName" value=""/>
                  </label>

                  <label for="alias">Alias
                    <input type="text" id="alias" name="alias" value=""/>
                  </label>

                  <label for="gender_male" class="inline">
                    <input type="radio" id="gender_male" name="gender" value="male"/>Male
                  </label>

                  <label for="gender_female" class="inline">
                    <input type="radio" id="gender_female" name="gender" value="female"/>Female
                  </label>

                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="dob"><span class="requiredLabel">*</span>Date of birth
                    <input type="text" id="dob" name="dob" rel="date" />
                  </label>

                  <label for="age">Age
                    <input type="number" id="age" name="age"/>
                  </label>

                  <label for="ageRange"> Age range
                    <select id="ageRange" name="ageRange">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>

                  <div class="fieldErrors"></div>

                </div>
                <div class="row">
                  <!--Address-->
                  <label for="street">Street
                    <input type="text" id="street" name="street"/>
                  </label>

                  <label for="city">City
                    <input type="text" id="city" name="city"/>
                  </label>

                  <label for="state"><span class="requiredLabel">*</span>State
                    <select id="state" name="state">
                      <option value=""></option>
                      <option value="IL">IL</option>
                      <option value="MN">MN</option>
                    </select>
                  </label>

                  <label for="zip">Zip code
                    <input type="text" id="zip" name="zip" rel="zip"/>
                  </label>

                  <div class="fieldErrors"></div>

                </div>

                <div class="row">
                  <label for="email"><span class="requiredLabel">*</span>Email address
                    <input type="email" id="email" name="email"/>
                  </label>

                  <label for="phone">Phone number
                    <input type="tel" id="phone" name="phone"/>
                  </label>

                  <label for="url">Url
                    <input type="url" id="url" name="url"/>
                  </label>

                  <div class="fieldErrors"></div>

                </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset id="favoriteFoods">
                    <legend>Favorite foods</legend>
                    <label for="food1" class="stacked">
                      <input type="checkbox" id="food1" name="food1" value="Chinese"/>Chinese
                    </label>
                    <label for="food2" class="stacked">
                      <input type="checkbox" id="food2" name="food2" value="Italian"/>Italian
                    </label>
                    <label for="food3" class="stacked">
                      <input type="checkbox" id="food3" name="food3" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food4" class="stacked">
                      <input type="checkbox" id="food4" name="food4" value="Mexican"/>Mexican
                    </label>
                  </fieldset>

                  <!--Favorite Color--->
                  <fieldset id="color">
                    <legend><span class="requiredLabel">*</span>Favorite color</legend>
                    <label for="color1" class="inline">
                      <input type="radio" id="color1" name="color" value="red"/>Red
                    </label>
                    <label for="color2" class="inline">
                      <input type="radio" id="color2" name="color" value="green"/>Green
                    </label>
                    <label for="color3" class="inline">
                      <input type="radio" id="color3" name="color" value="blue"/>Blue
                    </label>
                  </fieldset>

                  <div class="fieldErrors"></div>

                </div>


                <div class="row">
                  <label for="weight">Weight (lbs)
                    <input type="text" id="weight" name="weight" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="creditCard">Credit Card Number
                    <input type="text" id="creditCard" name="creditCard" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="salary">Salary
                    <input type="text" id="salary" name="salary" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="contactTime">Best time to call
                    <input type="text" id="contactTime" name="contactTime" rel="time" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">

                  <label for="message"><span class="requiredLabel">*</span>Message
                    <textarea cols="20" rows="5" id="message" name="message"></textarea>
                  </label>

                  <div class="fieldErrors">
<!--                    <span>Message is required</span>-->
                  </div>

                </div>

                <div class="row">
                  <input type="submit" id="submitInlineForm" name="submitInlineForm" value="Submit"/>
                </div>

              </form>


              <h2>Block Form</h2>

              <form id="blockForm" action="" method="post" class="blockForm">

                <div class="formErrors" id="blockFormErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul></ul>
                </div>

                <div class="row">
                  <label for="firstName2"><span class="requiredLabel">*</span>First name
                    <input type="text" id="firstName2" name="firstName2" value=""/>
                  </label>
                </div>
                <div class="row">
                  <label for="lastName2"><span class="requiredLabel">*</span>Last name
                    <input type="text" id="lastName2" name="lastName2" value=""/>
                  </label>
                </div>

                <div class="row">
                  <label for="alias2">Alias
                    <input type="text" id="alias2" name="alias2" value=""/>
                  </label>
                </div>



                <div class="row">
                  <label for="dob2"><span class="requiredLabel">*</span>Date of birth
                    <input type="text" id="dob2" name="dob2" rel="date" />
                  </label>
                </div>

                <div class="row">

                  <label for="age2">Age
                    <input type="number" id="age2" name="age2"/>
                  </label>

                </div>


                <div class="row">
                  <label for="ageRange2"> Age range
                    <select id="ageRange2" name="ageRange2">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>
                </div>


                <div class="row">
                  <!--Address-->
                  <label for="street2">Street
                    <input type="text" id="street2" name="street2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="city2">City
                    <input type="text" id="city2" name="city2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="state2"><span class="requiredLabel">*</span>State
                    <select id="state2" name="state2">
                      <option value=""></option>
                      <option value="IL">IL</option>
                    </select>
                  </label>
                </div>

                <div class="row">
                  <label for="zip2">Zip code
                    <input type="text" id="zip2" name="zip2" rel="zip"/>
                  </label>
                </div>

                <div class="row">
                  <label for="email2"><span class="requiredLabel">*</span>Email address
                    <input type="email" id="email2" name="email2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="phone2">Phone number
                    <input type="tel" id="phone2" name="phone2"/>
                  </label>
                </div>

            <div class="row">
                  <label for="url2">Url
                    <input type="url" id="url2" name="url2"/>
                  </label>
            </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset id="favoriteFoods2">
                    <legend>Favorite foods</legend>
                    <label for="food12" class="stacked">
                      <input type="checkbox" id="food12" name="food12" value="Chinese"/>Chinese
                    </label>
                    <label for="food22" class="stacked">
                      <input type="checkbox" id="food22" name="food22" value="Italian"/>Italian
                    </label>
                    <label for="food32" class="stacked">
                      <input type="checkbox" id="food32" name="food32" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food42" class="stacked">
                      <input type="checkbox" id="food42" name="food42" value="Mexican"/>Mexican
                    </label>
                  </fieldset>
                </div>

              <div class="row">
                  <!--Favorite Color--->
                  <fieldset id="color222">
                    <legend><span class="requiredLabel">*</span>Favorite color</legend>
                    <label for="color12" class="inline">
                      <input type="radio" id="color12" name="color222" value="red"/>Red
                    </label>
                    <label for="color22" class="inline">
                      <input type="radio" id="color22" name="color222" value="green"/>Green
                    </label>
                    <label for="color32" class="inline">
                      <input type="radio" id="color32" name="color222" value="blue"/>Blue
                    </label>
                  </fieldset>

                </div>


                <div class="row">
                  <label for="weight2">Weight (lbs)
                    <input type="text" id="weight2" name="weight2" />
                  </label>

                </div>

                <div class="row">
                  <label for="creditCard2">Credit Card Number
                    <input type="text" id="creditCard2" name="creditCard2" />
                  </label>
                </div>

                <div class="row">
                  <label for="salary2">Salary
                    <input type="text" id="salary2" name="salary2" />
                  </label>

                </div>

                <div class="row">
                  <label for="contactTime2">Best time to call
                    <input type="text" id="contactTime2" name="contactTime2" rel="time" />
                  </label>

                </div>

                <div class="row">

                  <label for="message2"><span class="requiredLabel">*</span>Message
                    <textarea cols="20" rows="5" id="message2" name="message2"></textarea>
                  </label>

                </div>

                <div class="row">
                  <input type="submit" id="submitBlockForm" name="submitBlockForm" value="Submit"/>
                </div>

              </form>
         </div>

    </div>

    <!--Side Section -->
    <aside id="sideContent">
      <div>
        <!-- start slipsum code -->

        <h1>Build Downloads</h1>
        <p>Unminified Version: </p>
        <p>Minified Version: </p>


        <!-- end slipsum code -->
      </div>
    </aside>

    <footer id="footer">
    <?php include "includes/footer.php"?>
    </footer>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>

  <script src="js/plugins/jquery.validate.min.js"></script>
  <script src="js/plugins/additional-methods.js"></script>
  <script src="js/plugins/custom-validation-methods.js"></script>
  <script src="js/plugins/jquery.maskedinput-1.3.js"></script>
  <script src="js/plugins/jquery.timeentry.min.js"></script>
  <script src="js/plugins/jquery.keyfilter-1.7.min.js"></script> <!-- Not being used -->
  <script src="js/plugins/jquery-ui-1.8.15.custom.min.js"></script>

  <script src="js/mylibs/tws_console.js"></script>
  <script src="js/mylibs/tws_form.js"></script>

  <script src="js/plugins/jquery.cluetip.js"></script>
  <script src="js/plugins/jquery.hoverIntent.js"></script>

  <script>
      $(function(){
        $("#inlineForm").TWS_Form( {
          validate : {
          errorContainer : "inlineFormErrors",
          rules : {
            firstName : {required : true, minlength : 2, maxlength : 10, help : "This is the first name"},
            lastName : {required : true, help : {title :"Custom last name", text : "This is the last name"}},
            alias : {lettersonly: true},
            dob: {required : true, date:true, help : "Date of birth"},
            email : {required : true, email : true},
            message : {required : true},
            state : {required: true, help : "Select a state"},
            zip : {zip : true},
            favoriteFoods : {help :"Select one or more of your favorite foods.<p>There are many to choose from.</p><h1>This is yummy!</h1>"},
            color : {requiredGroup : true, help : "Select your favorite color"},
            phone : {phoneUS : true},
            url : {url : true},
            city : {alphanumeric : true},
            age : {digits : true, min : 1, max : 100},
            weight : {number : true},
            creditCard : {creditcard : true},
            salary : {money : true},
            contactTime : {timestamp : true}
          },
          ajaxForm : {
            //options go here
          }
          }});

        $("#blockForm").TWS_Form( {
          validate : {
          errorContainer : "blockFormErrors",
          rules : {
            firstName2 : {required : true, minlength : 2, maxlength : 10},
            lastName2 : {required : true},
           // alias2 : {lettersonly: true, help : {title : "What does the alias mean?", text : "This is an alternate name"}},
            dob2: {required : true, date:true},
            email2 : {required : true, email : true},
            message2 : {required : true, help : "Enter your message here"},
            state2 : {required: true},
            zip2 : {zip : true},
            favoriteFoods2 : {help :"Select one or more of your favorite foods"},
            color222 : {requiredGroup : true},
            phone2 : {phoneUS : true},
            url2 : {url : true},
            city2 : {alphanumeric : true},
            age2 : {digits : true, min : 1, max : 100},
            weight2 : {number : true},
            creditCard2 : {creditcard : true},
            salary2 : {money : true},
            contactTime2 : {timestamp : true}
          }
          }});
      });
  </script>
  <!-- end scripts-->

	
  <!-- Change UA-XXXXX-X to be your site's ID
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>
 -->

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
</body>
</html>
